<template>
	<view class="mask" :style="{display:maskState?'block':'none'}">
		<view class="local" v-if="maskInfo.desc!=='login' && maskInfo.desc!=='getTel'">
			<view class="my-service" @click="upLeftToBottomRightFunction.myService">
				{{maskInfo.desc}}
			</view>
			<view class="call-service" @click="upLeftToBottomRightFunction.callService">
				{{maskInfo.contact}}
			</view>
			<view @click="upLeftToBottomRightFunction.close" class="close">
				取消
			</view>
		</view>
		<view class="login local" v-else-if="maskInfo.desc==='login'">
			<!-- 登录 -->
			<image class="background-image" src="@/static/images/my/loginBackground@2x.png"></image>
			<text class="desc-main">欢迎登陆,西肆闹市</text>
			<text class="desc-other">登陆后下单即可享受更多优惠,享受更好的服务体验</text>
			<button class="login" @click="upLeftToBottomRightFunction.login">一键登录</button>
			<view class="login-warn">
				<image class="bingo" src="" @click="upLeftToBottomRightFunction.agree"></image>
				<text class="desc">登录即表示已阅读并同意《用户须知》《隐私政策》</text>
			</view>
		</view>
		<view v-else class="get-tel local">
			<view class="title">
				<image class="logo" src="@/static/images/my/getTelLogo@2x.png"></image>
				<text class="desc">西肆闹市点单+</text>
			</view>
			<view class="ask">
				<text class="desc">申请获取并验证你的手机号</text>
				<text class="service">提供点餐配送,会员权益服务</text>
			</view>
			<view class="lock" @click="upLeftToBottomRightFunction.lockPhone">
				<text class="tel">{{'183****0396'}}</text>
				<text class="desc">微信绑定号码</text>
			</view>
			<view class="not-allow" @click="upLeftToBottomRightFunction.notAllow">
				不允许
			</view>
			<view class="other-tel" @click="upLeftToBottomRightFunction.otherPhone">
				使用其他号码
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		toRefs,
		computed
	} from 'vue'


	const props = defineProps({
		maskState: {
			type: Boolean,
			default: false,
		},
		upLeftToBottomRightFunction: {
			type: Object,
			required: true
		},
		maskInfo: {
			type: Object,
		}
	})
	

</script>

<style lang="scss" scoped>
	@import "@/static/css/commen.scss";

	.mask {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		left: -32rpx;
		top: -120rpx;
		z-index: 9999;

		.local {
			position: absolute;
			bottom: 0;
			width: 100%;
			background: #F5F5F5;
			border-radius: 24rpx 24rpx 0 0;
		}

		.my-service,
		.call-service,
		.close {
			@include font-base(34rpx, #333333);
			background: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 112rpx;
		}

		.my-service {
			@include font-base(28rpx, #BEBEBE, 400);
			height: 128rpx;
			border-radius: 24rpx 24rpx 0 0;
		}

		.close {
			margin-top: 16rpx;
		}
		
		.login{
			.background-image{
				width: 100%;
			}
			
			.desc-main{
				position: absolute;
				left: 32rpx;
				top: 198rpx;
				@include font-base(48rpx,#333333,600)
			}
			.desc-other{
				position: absolute;
				left: 32rpx;
				top: 268rpx;
				@include font-base(24rpx,#666666,400)
			}
			.login{
				margin: 70rpx 26rpx;
				background: linear-gradient(to right,#FFD93B,#FFB42D);
				border: transparent;
				border-radius: 48rpx;
			}
			.login-warn{
				display: flex;
				justify-content: center;
				.bingo{
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx
				}
				
				.desc{
					@include font-base(20rpx,#999999,400);
					text-align: center;
				}
				
			}
		}
		
		.get-tel{
			padding: 64rpx 48rpx;
			display: flex;
			flex-direction: column;
			gap:32rpx;
			
			.title{
				display: flex;
				gap: 16rpx;
				align-items: center;
				.logo{
					width: 48rpx;
					height: 48rpx;
				}
				.desc{
					@include font-base(32rpx,#1A1A1A,600);
				}
			}
			
			.ask{
				display: flex;
				flex-direction: column;
				gap:8rpx;
				.desc{
					@include font-base(36rpx,#1A1A1A,600);
				}
				
				.service{
					@include font-base(28rpx,#666666,400);
				}
			}
			
			
			.lock,.not-allow{
				background: #FFFFFF;
				height: 144rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 24rpx
			}
			
			.lock{
			}
			
			.not-allow{
				@include font-base(36rpx,#1A1A1A,400);
			}
			
			.other-tel{
				@include font-base(28rpx,#56678D,500);
				text-align: center;
			}
			
		}
		
	}
</style>